import React, { Component } from 'react'
// 引入路由组件
import { Switch, Route, Redirect } from "react-router-dom";

// 引入要展示的组件
// import Csstransition from '../components/CSSTransition.jsx'
// import ComA from '../components/ComA.jsx'
// import Comment from '../components/Comment.jsx'
// import Notfound from '../components/Notfound1.jsx'
// import Get from '../components/Get.jsx'
// import List from '../components/List.jsx'
// import Detail from '../components/Detail.jsx'
// 换成懒加载的方式
// 1.导入组件的方式改为lazy
const Csstransition = React.lazy(() => import('../components/CSSTransition.jsx'))
const ComA = React.lazy(() => import('../components/ComA.jsx'))
const Comment = React.lazy(() => import('../components/Comment.jsx'))
const Notfound = React.lazy(() => import('../components/Notfound1.jsx'))
const Get = React.lazy(() => import('../components/Get.jsx'))
const List = React.lazy(() => import('../components/List.jsx'))
const Detail = React.lazy(() => import('../components/Detail.jsx'))
const Comfather = React.lazy(() => import('../components/ComFather.jsx'))
const Redux = React.lazy(() => import('../components/Redux.jsx'))
const Content = React.lazy(() => import('../components/Content.jsx'))
const UseState = React.lazy(() => import('../components/UseState.jsx'))
const Effectclass = React.lazy(() => import('../components/EffectClass.jsx'))
const Useeffect = React.lazy(() => import('../components/UseEffect.jsx'))
const UseReducer = React.lazy(() => import('../components/UseReducer.jsx'))
const Contextfather = React.lazy(() => import('../components/ContextFather.jsx'))
const Myhook = React.lazy(() => import('../components/MyHook.jsx'))

export default class Router extends Component {
  render() {
    // 定义路由规则
    return (
      <>
        {/* 2.展示组件时的修改 */}
        {/* Suspense:悬念 */}
        <React.Suspense fallback={<mark>Loading...</mark>}>
          <Switch>
            {/* exact:精准匹配，字符串完全相等才匹配成功，一般用于首页或者path为‘/’的页面 */}
            {/* 如果没有添加exact属性，就是字符串包含 */}
            {/* strict: 严格匹配，主要匹配路径最后的斜线，要求浏览器地址和路径完全一致，斜线都要写或者都不写*/}
            <Route path="/" exact component={ComA}></Route>
            <Route path="/csstransition" strict component={Csstransition}></Route>
            <Route path="/comment/" component={Comment}></Route>
            <Route path="/get" component={Get}></Route>
            <Route path="/list" component={List}></Route>
            {/* 动态路由，路由地址中有变量，多个路由地址渲染同一个组件 */}
            <Route path="/detail/:name" component={Detail}></Route>
            <Route path="/comfather" component={Comfather}></Route>
            <Route path="/redux" component={Redux}></Route>
            <Route path="/content" component={Content}></Route>
            <Route path="/usestate" component={UseState}></Route>
            <Route path="/effectclass" component={Effectclass}></Route>
            <Route path="/useeffect" component={Useeffect}></Route>
            <Route path="/usereducer" component={UseReducer}></Route>
            <Route path="/contextfather" component={Contextfather}></Route>
            <Route path="/myhook" component={Myhook}></Route>
            {/* 如果path="*"，可以省略这一项，表示匹配所有 */}
            {/* <Route component={Notfound}></Route> */}
            {/* 上面是处理404的第一种方式 */}
            {/* 下面是处理404的第二种方式：重定向 */}
            <Route path="/404" component={Notfound}></Route>
            <Redirect path="*" to="/404"></Redirect>
          </Switch>
        </React.Suspense>
      </>
    )
  }
}
